<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- 360 browser webkit mode begin -->
    <meta name="renderer" content="webkit"/>
    <!-- 360 browser webkit mode end -->

    <title>Echarts2 svg Demo</title>
    <script type="text/javascript" src="jquery.1.12.0.js"></script>
    <!-- ECharts单文件引入 -->
    <script src="jquery.echarts/2.2.7/build/dist/echarts.js"></script>
    <style>
        body{
            width: 100%;
            height: 100%;
            margin: 0 auto;
            font-family: "微软雅黑";
            overflow: hidden;
            background: #080A16;
        }
        .header {
            width: 100%;
            height: 100px;
            background: #111936;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .logo {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 30%;
            font-size: 40px;
            color: #ffffff;
        }
        .logo > img {
            width: 60px;
            height: 60px;
            margin: 0 27px 0 60px;
        }

        .nav {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            font-size: 24px;
            width: 60%;
            color: #a9a9a9;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        .nav > div {
            flex: 1;
        }

        .nav-item-bor{
            display: list-item;
            width: 100%;
            top: -10px;
            position: relative;
        }

        .nav-active{
            color: #ffffff;
            font-size: 32px;
        }
        .nav-title:hover{
            color: #ffffff;
            font-size: 32px;
            width: 100%;
            height: 5px;
            /*background: radial-gradient(#26DBC1, #1E9AD4);*/
            border-radius: 100%;
        }

        .content {
            display: flex;
            flex-direction: row;
            height: 970px;
            background: #080A16;
            padding: 10px 10px 0 10px;
            overflow: hidden;
        }

        .item {
            width: 738px;
            height: 311px;
            margin: 0 10px 10px 0;
            background-image: url('map/img/frame1.png');
            background-repeat:no-repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
        }

        .right {
            width: 399px;
            height: 958px;
            background-image: url('map/img/frame2.png');
            background-repeat:no-repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
        }
        .right-header {
            color: #ffffff;
            margin-bottom: 5px;
        }
        .caption {
            font-size: 24px;
            text-align: center;
            margin: 23px 0 16px 0;
        }

        .caption-bar {
            height: 10px;
            background-image: url('map/img/line_long.png');
            position: relative;
            top: -10px;
        }

        .title {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            color: #fff;
        }
        .pname {
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#26DBC1), to(#1E9AD4));
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 16px;
        }

        .list{
            font-size: 20px;
        }

        .list-data {
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 840px;
        }
        .list-item {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            color: #fff;
            padding: 25px 0 16px 0;
            border-bottom: 2px solid rgb(151,151,151,.3);
        }
        .list-item > div{
            text-align: center;
            width : 25%;
        }

        .left {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1500px;
        }

    </style>

</head>
<body>
<div class="container">
    <div class="header">
        <div class="logo">
            <img src="map/img/logo.png" alt="">
            <span class="name">机房出入管理</span>
        </div>
        <div class="nav">
            <div class="nav-title">T1航站楼<img src="" class="nav-item-bor" /></div>
            <div class="nav-title nav-active" >T2航站楼<img src="map/img/line_short.png" class="nav-item-bor" /></div>
            <div class="nav-title">停车场<img src="" class="nav-item-bor" /></div>
            <div class="nav-title">其他<img src="" class="nav-item-bor" /></div>
        </div>
    </div>
    <div class="content">
        <div class="left">
            <div class="item" id="map10"></div>
            <div class="item" id="map9"></div>
            <div class="item" id="map8"></div>
            <div class="item" id="map7"></div>
            <div class="item" id="map6"></div>
            <div class="item" id="map5"></div>
        </div>
        <div class="right">
            <div class="right-header">
                <div class="caption">机房出入人员信息</div>
                <div style="margin-bottom: 18px">
                    <img src="map/img/line_short.png" class="nav-item-bor" />
                </div>
                <div class="title">
                    <div class="pname">机房编号</div>
                    <div class="pname">人员信息</div>
                    <div class="pname">刷卡时间</div>
                    <div class="pname">签入时间</div>
                </div>
            </div>
            <div class="list-data">
                <div class="list">
                </div>
                <div class="list-bak"></div>
            </div>
        </div>
    </div>
    <input type="hidden" id="full_screen_flag" value="1"/>
    <input type="hidden" id="symbolSize" value="20"/>
</div>
<!-- cheart start -->
<script>
    //添加markPoint
    function addMarkPoint(chart,seriesIdx,data){
        var markData = {data: [data]}
        chart.addMarkPoint(seriesIdx, markData);
        chart.refresh();//刷新图表，图例选择、数据区域缩放，拖拽状态均保持。
    }
    //删除markPoint
    function delMarkPoint(chart,seriesIdx,markName){
        chart.delMarkPoint(seriesIdx, markName);
        chart.refresh();//刷新图表，图例选择、数据区域缩放，拖拽状态均保持。
    }

    // 路径配置
    require.config({
        paths: {
            echarts: './jquery.echarts/2.2.7/build/dist'
        }
    });

    //charts对象数组
    var myChartArray =new Array();

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/map' // 使用地图就加载map模块，按需加载
        ],

        function (ec) {
            require('echarts/util/mapData/params').params.T2 = {
                getGeoJson: function (callback) {
                    $.ajax({
                        url: "map/svg/T2.svg",
                        dataType: 'xml',
                        success: function (xml) {
                            callback(xml)
                        }
                    });
                }
            }
            // 基于准备好的dom，初始化echarts图表
            var myChart5 = ec.init(document.getElementById('map5'));
            var myChart6 = ec.init(document.getElementById('map6'));
            var myChart7 = ec.init(document.getElementById('map7'));
            var myChart8 = ec.init(document.getElementById('map8'));
            var myChart9 = ec.init(document.getElementById('map9'));
            var myChart10 = ec.init(document.getElementById('map10'));

            myChartArray.push([5, myChart5]);
            myChartArray.push([6, myChart6]);
            myChartArray.push([7, myChart7]);
            myChartArray.push([8, myChart8]);
            myChartArray.push([9, myChart9]);
            myChartArray.push([10, myChart10]);

            for (x in myChartArray) {
                myChartArray[x][1].showLoading();
            }

            lodingData(myChartArray);
            //setInterval(function(){lodingData(myChartArray)},5000);

            //setInterval(function(){myChart1.restore()},5000);//还原图表，各种状态均被清除，还原为最初展现时的状态。

            //添加地图myChart1的点击事件
            var ecConfig = require('echarts/config');
            //myChart1.on(ecConfig.EVENT.CLICK, eConsole);
            //function eConsole(param){
            //console.log(param);
            //}
        }
    );
    $(function(){
        listScroll(); // 数据加载完毕开始滚动
    });

    // 数据滚动
    function listScroll(){
        var listdata = document.getElementsByClassName('list-data')[0]; //$('.list-data');
        var list = document.getElementsByClassName('list')[0]; //$('.list');
        var listbak = document.getElementsByClassName('list-bak')[0]; //$('.list-bak');
        var speed = 50; //设置向上轮动的速度

        listbak.innerHTML = list.innerHTML;//复制节点
        function moveTop() {
            if (list.offsetHeight - listdata.scrollTop <= 0) {
                listdata.scrollTop--;
            } else {
                listdata.scrollTop++;
            }
        }
        var myFunction = setInterval(moveTop, speed);
        listdata.onmouseover = function() {
            clearInterval(myFunction);
        }
        listdata.onmouseout = function() {
            myFunction = setInterval(moveTop, speed);
        }
    }
    /**
     * 加载滚动数据
     * @param scrollData
     */
    function lodingListScroll(scrollData){
        scrollData.sort(compare('name'));
        var tempHtml = '';
        for (x in scrollData) {
            tempHtml+= '<div id="list-item'+ scrollData[x].name +'" class="list-item">'
                + '<div>'+ scrollData[x].roomNo +'</div>'
                + '<div>'+ scrollData[x].userName +'</div>'
                + '<div>'+ scrollData[x].swipeTime +'</div>'
                + '<div>'+ scrollData[x].signInTime +'</div>'
                + '</div>';
        }
        $('.list').html(tempHtml);
    }

    function compare(property){
        return function(a,b){
            var value1 = a[property];
            var value2 = b[property];
            return value2 -value1;
        }
    }

    function lodingData(echart){
        console.log(1);
        
		var res = '{"msg":"success","desc":"","data":{"terminal":"T2","roomData":[{"mapId":10,"mapName":"18.4米层","allRomm":{"addMarkPointData":[{"roomNo":"B512","name":"B512","geoCoord":[295,48],"location":"长廊18.4米层７３号登机口和平外滩店左边"},{"roomNo":"B513","name":"B513","geoCoord":[355,58],"location":"长廊18.4米层７３号登机口汉堡王店右边"},{"roomNo":"C501","name":"C501","geoCoord":[269,74],"location":"连廊19.6米层国航贵宾室4F"},{"roomNo":"C502","name":"C502","geoCoord":[332,84],"location":"连廊19.6米层（主楼4层禁区）"},{"roomNo":"C503","name":"C503","geoCoord":[242,100],"location":"连廊19.6米层（4层餐厅北面）"},{"roomNo":"C504","name":"C504","geoCoord":[305,109],"location":"连廊19.6米层（4层餐厅南面）"}],"delMarkPointData":""},"signInRoom":{"addMarkPointData":[],"delMarkPointData":[]},"notSignInRoom":{"addMarkPointData":[],"delMarkPointData":[]}},{"mapId":5,"mapName":"-6米层","allRomm":{"addMarkPointData":[{"roomNo":"A001","name":"A001","geoCoord":[135,105],"location":"主楼-6.0米层国内到达安检旁电梯下B1层(M岛头电梯下)"},{"roomNo":"A002","name":"A002","geoCoord":[190,95],"location":"主楼-6.0米层M岛下的地下室"},{"roomNo":"A003","name":"A003","geoCoord":[235,101],"location":"主楼-6.0米层地下室"},{"roomNo":"A004","name":"A004","geoCoord":[281,110],"location":"主楼-6.0米层地下室"},{"roomNo":"A005","name":"A005","geoCoord":[325,117],"location":"主楼-6.0米层A岛下的地下室"},{"roomNo":"A006","name":"A006","geoCoord":[350,140],"location":"主楼-6.0米层国际到达安检旁电梯下B1层(A岛头电梯下)"}],"delMarkPointData":""},"signInRoom":{"addMarkPointData":[],"delMarkPointData":[]},"notSignInRoom":{"addMarkPointData":[],"delMarkPointData":[]}},{"mapId":6,"mapName":"0米层","allRomm":{"addMarkPointData":[{"roomNo":"A101","name":"A101","geoCoord":[152,116],"location":"主楼0.0米层国内0米(M岛电梯下)"},{"roomNo":"A102","name":"A102","geoCoord":[194,121],"location":"主楼0.0米层国内到达行李提取44、45"},{"roomNo":"A103","name":"A103","geoCoord":[234,125],"location":"主楼0.0米层国际0米到达43转盘"},{"roomNo":"A104","name":"A104","geoCoord":[272,131],"location":"主楼0.0米层国际0米到达42转盘"},{"roomNo":"A105","name":"A105","geoCoord":[304,136],"location":"主楼0.0米层国际0米到达45转盘"},{"roomNo":"A106","name":"A106","geoCoord":[345,145],"location":"主楼0.0米层1F、国际到达（汉堡王下面）"},{"roomNo":"A107","name":"A107","geoCoord":[206,97],"location":"连廊-2.0米层北行李分拣区"},{"roomNo":"A108","name":"A108","geoCoord":[345,123],"location":"连廊-2.0米层南行李分拣区"},{"roomNo":"B100","name":"B100","geoCoord":[25,32],"location":"长廊0.0米层52#桥下"},{"roomNo":"B101","name":"B101","geoCoord":[50,36],"location":"长廊0.0米层56#桥下"},{"roomNo":"B102","name":"B102","geoCoord":[114,11],"location":"长廊0.0米层57#桥下(2-A1-1T2隔壁)"},{"roomNo":"B103","name":"B103","geoCoord":[100,44],"location":"长廊0.0米层58#桥下"},{"roomNo":"B104","name":"B104","geoCoord":[125,48],"location":"长廊0.0米层60#桥北"},{"roomNo":"B105","name":"B105","geoCoord":[150,52],"location":"长廊0.0米层60#桥下"},{"roomNo":"B106","name":"B106","geoCoord":[175,56],"location":"长廊0.0米层62#桥下(CL-2应急通道里面)"},{"roomNo":"B107","name":"B107","geoCoord":[225,64],"location":"长廊0.0米层64#桥下"},{"roomNo":"B108","name":"B108","geoCoord":[242,31],"location":"长廊0.0米层65#桥下"},{"roomNo":"B109","name":"B109","geoCoord":[275,72],"location":"长廊0.0米层CL-3应急通道里面/(B110弱电间北边)"},{"roomNo":"B110","name":"B110","geoCoord":[300,76],"location":"长廊0.0米层北侯机楼尽头正对"},{"roomNo":"B111","name":"B111","geoCoord":[315,45],"location":"长廊0.0米层13.6米层D71旁楼梯下到底"},{"roomNo":"B112","name":"B112","geoCoord":[325,80],"location":"长廊0.0米层D229远机位对面"},{"roomNo":"B113","name":"B113","geoCoord":[345,50],"location":"长廊0.0米层13.6米层D75旁楼梯下到底"},{"roomNo":"B114","name":"B114","geoCoord":[350,84],"location":"长廊0.0米层南行李分拣区到机坪车道附近"},{"roomNo":"B115","name":"B115","geoCoord":[425,100],"location":"长廊0.0米层应急通道里面（2-B4-1K1隔壁）"},{"roomNo":"B116","name":"B116","geoCoord":[450,104],"location":"长廊0.0米层2-B4-1K2隔壁"},{"roomNo":"B117","name":"B117","geoCoord":[475,108],"location":"长廊0.0米层80#桥下应急通道"},{"roomNo":"B118","name":"B118","geoCoord":[490,72],"location":"长廊0.0米层83#桥下"},{"roomNo":"B119","name":"B119","geoCoord":[500,112],"location":"长廊0.0米层84#桥下（2-C1-1K3隔壁）"},{"roomNo":"B120","name":"B120","geoCoord":[524,76],"location":"长廊0.0米层86#桥下应急通道里面"},{"roomNo":"B121","name":"B121","geoCoord":[525,116],"location":"长廊0.0米层86#桥下（2-C2-1X3隔壁）"},{"roomNo":"B122","name":"B122","geoCoord":[550,80],"location":"长廊0.0米层88#桥下"},{"roomNo":"B123","name":"B123","geoCoord":[550,120],"location":"长廊0.0米层88#桥南"},{"roomNo":"B124","name":"B124","geoCoord":[595,84],"location":"长廊0.0米层91#桥北（2-C3-1K5隔壁）"},{"roomNo":"B125","name":"B125","geoCoord":[575,120],"location":"长廊0.0米层92#桥下（2-C3-1X1隔壁）"},{"roomNo":"B126","name":"B126","geoCoord":[605,132],"location":"长廊0.0米层94#桥下"},{"roomNo":"MDF1","name":"MDF1","geoCoord":[250,68],"location":""},{"roomNo":"MDF2","name":"MDF2","geoCoord":[400,86],"location":""},{"roomNo":"汇聚一","name":"汇聚一","geoCoord":[75,40],"location":"长廊0.0米层B110弱电间北面（60号桥下）"},{"roomNo":"汇聚二","name":"汇聚二","geoCoord":[200,60],"location":"长廊0.0米层64号桥下"},{"roomNo":"汇聚三","name":"汇聚三","geoCoord":[375,80],"location":"长廊0.0米层80号桥下"},{"roomNo":"汇聚四","name":"汇聚四","geoCoord":[511,94],"location":"长廊0.0米层86号桥下"},{"roomNo":"C101","name":"C101","geoCoord":[221,87],"location":"连廊-2.0米层行李分拣区北"},{"roomNo":"C102","name":"C102","geoCoord":[254,92],"location":"连廊-2.0米层行李分拣区北"},{"roomNo":"C103","name":"C103","geoCoord":[285,98],"location":"连廊-2.0米层行李分拣区北"},{"roomNo":"C104","name":"C104","geoCoord":[310,100],"location":"连廊-2.0米层行李分拣区北"},{"roomNo":"C105","name":"C105","geoCoord":[336,105],"location":"连廊-2.0米层行李分拣区南（RT21212)"},{"roomNo":"C106","name":"C106","geoCoord":[360,108],"location":"连廊-2.0米层行李分拣区南"}],"delMarkPointData":""},"signInRoom":{"addMarkPointData":[],"delMarkPointData":[]},"notSignInRoom":{"addMarkPointData":[],"delMarkPointData":[]}},{"mapId":7,"mapName":"4.2米层","mapSubName":"T2连廊6米层T2主楼6米层","allRomm":{"addMarkPointData":[{"roomNo":"C201","name":"C201","geoCoord":[292,98],"location":"连廊6.0米层国际到达工作人员通道边"},{"roomNo":"C202","name":"C202","geoCoord":[322,103],"location":"连廊6.0米层国际到达77号边检通道附近"},{"roomNo":"C203","name":"C203","geoCoord":[358,101],"location":"连廊6.0米层国际到达17号边检通道附近"},{"roomNo":"C204","name":"C204","geoCoord":[262,92],"location":"连廊6.0米层国际转国内中转柜台"},{"roomNo":"C205","name":"C205","geoCoord":[232,88],"location":"连廊6.0米层国内转国际中转柜台"},{"roomNo":"B201","name":"B201","geoCoord":[36,39],"location":"长廊4.2米层56号登机口吸烟室"},{"roomNo":"B202","name":"B202","geoCoord":[86,12],"location":"长廊4.2米层57号登机口电梯旁"},{"roomNo":"B204a","name":"B204a","geoCoord":[72,38],"location":"长廊4.2米层60号登机口女厕所"},{"roomNo":"B204b","name":"B204b","geoCoord":[105,22],"location":"长廊4.2米层61号登机口吸烟室"},{"roomNo":"B206a","name":"B206a","geoCoord":[117,46],"location":"长廊4.2米层62号登机口吸烟室"},{"roomNo":"B206b","name":"B206b","geoCoord":[143,18],"location":"长廊4.2米层63号登机口女厕所"},{"roomNo":"B207a","name":"B207a","geoCoord":[146,50],"location":"长廊4.2米层64号登机口厕所"},{"roomNo":"B207b","name":"B207b","geoCoord":[179,24],"location":"长廊4.2米层65号登机口吸烟室"},{"roomNo":"B209a","name":"B209a","geoCoord":[179,54],"location":"长廊4.2米层67号对面吸烟室"},{"roomNo":"B209b","name":"B209b","geoCoord":[211,29],"location":"长廊4.2米层67号厕所"},{"roomNo":"B210a","name":"B210a","geoCoord":[219,61],"location":"长廊4.2米层C221厕所"},{"roomNo":"B210b","name":"B210b","geoCoord":[254,37],"location":"长廊4.2米层C220电梯旁吸烟室"},{"roomNo":"B211","name":"B211","geoCoord":[290,42],"location":"长廊4.2米层中转柜台对面吸烟室"},{"roomNo":"B212","name":"B212","geoCoord":[308,67],"location":"长廊4.2米层中转柜台顶头里面"},{"roomNo":"B213","name":"B213","geoCoord":[356,60],"location":"长廊4.2米层73号头等舱旁吸烟室"},{"roomNo":"B214","name":"B214","geoCoord":[338,79],"location":"长廊4.2米层77号北面玻璃墙"},{"roomNo":"B215a","name":"B215a","geoCoord":[373,85],"location":"长廊4.2米层77号旁吸烟室"},{"roomNo":"B215b","name":"B215b","geoCoord":[410,60],"location":"长廊4.2米层77号登机口旁厕所"},{"roomNo":"B216a","name":"B216a","geoCoord":[410,89],"location":"长廊4.2米层C79#对面厕所"},{"roomNo":"B216b","name":"B216b","geoCoord":[445,65],"location":"长廊4.2米层C79#吸烟室"},{"roomNo":"B217a","name":"B217a","geoCoord":[445,96],"location":"长廊4.2米层C80#吸烟室"},{"roomNo":"B217b","name":"B217b","geoCoord":[484,74],"location":"长廊4.2米层C81#厕所"},{"roomNo":"B219a","name":"B219a","geoCoord":[484,105],"location":"长廊4.2米层C82#厕所"},{"roomNo":"B219b","name":"B219b","geoCoord":[529,82],"location":"长廊4.2米层C83#吸烟室"},{"roomNo":"B220a","name":"B220a","geoCoord":[529,112],"location":"长廊4.2米层C84#吸烟室"},{"roomNo":"B220b","name":"B220b","geoCoord":[570,90],"location":"长廊4.2米层C85#厕所"},{"roomNo":"B222a","name":"B222a","geoCoord":[570,120],"location":"长廊4.2米层C88#厕所"},{"roomNo":"B222b","name":"B222b","geoCoord":[608,95],"location":"长廊4.2米层C87#吸烟室"},{"roomNo":"B224","name":"B224","geoCoord":[660,102],"location":"长廊4.2米层C89#登机桥正对"},{"roomNo":"B225","name":"B225","geoCoord":[615,125],"location":"长廊4.2米层C90#登机桥正对"},{"roomNo":"A201","name":"A201","geoCoord":[120,110],"location":"主楼6.0米层国内安检旁"},{"roomNo":"A202","name":"A202","geoCoord":[172,115],"location":"主楼6.0米层国内到达"},{"roomNo":"A203","name":"A203","geoCoord":[220,123],"location":"主楼6.0米层星巴克后面"},{"roomNo":"A204","name":"A204","geoCoord":[263,130],"location":"主楼6.0米层国际问询"},{"roomNo":"A205","name":"A205","geoCoord":[308,138],"location":"主楼6.0米层国际货物办理柜台"},{"roomNo":"A206","name":"A206","geoCoord":[348,145],"location":"主楼6.0米层国际安检旁"}],"delMarkPointData":""},"signInRoom":{"addMarkPointData":[{"roomNo":"B204b","name":"21","geoCoord":[105,22],"location":"长廊4.2米层61号登机口吸烟室","userName":"施大熊","swipeTime":"","signInTime":"14:50:03"},{"roomNo":"B204a","name":"20","geoCoord":[72,38],"location":"长廊4.2米层60号登机口女厕所","userName":"施大熊","swipeTime":"","signInTime":"14:49:05"},{"roomNo":"A202","name":"18","geoCoord":[172,115],"location":"主楼6.0米层国内到达","userName":"施大熊","swipeTime":"","signInTime":"14:40:08"}],"delMarkPointData":[]},"notSignInRoom":{"addMarkPointData":[{"roomNo":"A201","name":"17","geoCoord":[120,110],"location":"主楼6.0米层国内安检旁","userName":"施大熊","swipeTime":"10:04:56","signInTime":""},{"roomNo":"B224","name":"27","geoCoord":[660,102],"location":"长廊4.2米层C89#登机桥正对","userName":"施大熊","swipeTime":"","signInTime":""}],"delMarkPointData":[]}},{"mapId":8,"mapName":"8.4米层","mapSubName":"T2 主楼9.6米层","allRomm":{"addMarkPointData":[{"roomNo":"A301","name":"A301","geoCoord":[125,103],"location":"主楼9.4米层L19下楼"},{"roomNo":"A302","name":"A302","geoCoord":[150,107],"location":"主楼9.4米层迈外迪做办公室"},{"roomNo":"A303","name":"A303","geoCoord":[182,110],"location":"主楼9.4米层还证处"},{"roomNo":"A304","name":"A304","geoCoord":[242,123],"location":"主楼9.4米层华宇做办公室"},{"roomNo":"A305","name":"A305","geoCoord":[285,130],"location":"主楼9.4米层国际到达过安检上2F"},{"roomNo":"A306","name":"A306","geoCoord":[352,141],"location":"主楼9.4米层国际到达过安检上2Ｆ走到底"},{"roomNo":"B301","name":"B301","geoCoord":[15,35],"location":"长廊10.4米层59#头等舱吸烟室"},{"roomNo":"B302","name":"B302","geoCoord":[80,2],"location":"长廊10.4米层59#头等舱"},{"roomNo":"B304a","name":"B304a","geoCoord":[46,38],"location":"长廊8.4米层58#厕所"},{"roomNo":"B304b","name":"B304b","geoCoord":[110,10],"location":"长廊8.4米层59#吸烟室"},{"roomNo":"B306a","name":"B306a","geoCoord":[80,41],"location":"长廊8.4米层60号吸烟室"},{"roomNo":"B306b","name":"B306b","geoCoord":[148,16],"location":"长廊8.4米层61号厕所"},{"roomNo":"B307a","name":"B307a","geoCoord":[120,46],"location":"长廊8.4米层64号厕所"},{"roomNo":"B307b","name":"B307b","geoCoord":[190,24],"location":"长廊8.4米层63号吸烟室"},{"roomNo":"B309a","name":"B309a","geoCoord":[160,54],"location":"长廊8.4米层65号登机口对面"},{"roomNo":"B309b","name":"B309b","geoCoord":[230,30],"location":"长廊8.4米层65号厕所"},{"roomNo":"B310a","name":"B310a","geoCoord":[200,60],"location":"长廊8.4米层67号登机口对面"},{"roomNo":"B310b","name":"B310b","geoCoord":[265,36],"location":"长廊8.4米层67号吸烟室"},{"roomNo":"B311a","name":"B311a","geoCoord":[240,70],"location":"长廊8.4米层国际转国际中转柜台"},{"roomNo":"B311b","name":"B311b","geoCoord":[305,41],"location":"长廊8.4米层71号吸烟室"},{"roomNo":"B312","name":"B312","geoCoord":[330,71],"location":"长廊8.4米层国际转国际中转柜台南边"},{"roomNo":"B313b","name":"B313b","geoCoord":[376,52],"location":"长廊8.4米层75#吸烟室（水墙对面）"},{"roomNo":"B315a","name":"B315a","geoCoord":[380,92],"location":"长廊8.4米层79#对面吸烟室"},{"roomNo":"B315b","name":"B315b","geoCoord":[418,60],"location":"长廊8.4米层79#厕所"},{"roomNo":"B316a","name":"B316a","geoCoord":[419,95],"location":"长廊8.4米层80#厕所"},{"roomNo":"B316b","name":"B316b","geoCoord":[460,66],"location":"长廊8.4米层81#吸烟室"},{"roomNo":"B317a","name":"B317a","geoCoord":[458,100],"location":"长廊8.4米层82#吸烟室"},{"roomNo":"B317b","name":"B317b","geoCoord":[502,72],"location":"长廊8.4米层83#厕所"},{"roomNo":"B319a","name":"B319a","geoCoord":[497,106],"location":"长廊8.4米层84#厕所"},{"roomNo":"B319b","name":"B319b","geoCoord":[544,78],"location":"长廊8.4米层85#吸烟室"},{"roomNo":"B320a","name":"B320a","geoCoord":[536,110],"location":"长廊8.4米层86#吸烟室"},{"roomNo":"B320b","name":"B320b","geoCoord":[586,86],"location":"长廊8.4米层87#厕所"},{"roomNo":"B322a","name":"B322a","geoCoord":[575,120],"location":"长廊8.4米层90#厕所"},{"roomNo":"B322b","name":"B322b","geoCoord":[628,90],"location":"长廊8.4米层89#吸烟室"},{"roomNo":"B324","name":"B324","geoCoord":[670,94],"location":"长廊10.4米层90#VIP"},{"roomNo":"B325","name":"B325","geoCoord":[607,125],"location":"长廊10.4米层89#VIP"},{"roomNo":"C301","name":"C301","geoCoord":[298,95],"location":"连廊9.4米层国际到达工作人员通道边上2F（C201弱电间上面）"},{"roomNo":"汇聚五","name":"汇聚五","geoCoord":[320,135],"location":"主楼9.4米层A302弱电间斜对面"},{"roomNo":"B313a","name":"B313a","geoCoord":[280,76],"location":"长廊8.4米层75#吸烟室（水墙对面）"},{"roomNo":"MDF3","name":"MDF3","geoCoord":[215,117],"location":""}],"delMarkPointData":""},"signInRoom":{"addMarkPointData":[],"delMarkPointData":[]},"notSignInRoom":{"addMarkPointData":[],"delMarkPointData":[]}},{"mapId":9,"mapName":"13.6米层","mapSubName":"T2长廊8.4米层T2主楼9.6米层","allRomm":{"addMarkPointData":[{"roomNo":"C401","name":"C401","geoCoord":[275,90],"location":"连廊13.6米层边检中间安检12#"},{"roomNo":"C402","name":"C402","geoCoord":[328,100],"location":"连廊13.6米层边检中间安检22#"},{"roomNo":"C403","name":"C403","geoCoord":[208,90],"location":"连廊13.6米层中间边检1#"},{"roomNo":"C404","name":"C404","geoCoord":[352,115],"location":"连廊13.6米层E岛后超规行李"},{"roomNo":"C405","name":"C405","geoCoord":[240,78],"location":"连廊13.6米层69登机口，日上免税行内"},{"roomNo":"C406","name":"C406","geoCoord":[378,98],"location":"连廊13.6米层77登机口，日上免税行"},{"roomNo":"B404a","name":"B404a","geoCoord":[60,40],"location":"长廊13.6米层59号登机口斜对面"},{"roomNo":"B404b","name":"B404b","geoCoord":[110,10],"location":"长廊13.6米层59号登机口吸烟室边上"},{"roomNo":"B406a","name":"B406a","geoCoord":[100,45],"location":"长廊13.6米层61号登机口斜对面"},{"roomNo":"B406b","name":"B406b","geoCoord":[148,16],"location":"长廊13.6米层61号登机口边上厕所"},{"roomNo":"B407a","name":"B407a","geoCoord":[145,52],"location":"长廊13.6米层62号登机口边上"},{"roomNo":"B407b","name":"B407b","geoCoord":[190,24],"location":"长廊13.6米层63号登机口吸烟室边上"},{"roomNo":"B409a","name":"B409a","geoCoord":[185,60],"location":"长廊13.6米层64号登机口边上"},{"roomNo":"B409b","name":"B409b","geoCoord":[230,30],"location":"长廊13.6米层65号登机口边上厕所"},{"roomNo":"B410a","name":"B410a","geoCoord":[220,66],"location":"长廊13.6米层66号登机口边上"},{"roomNo":"B410b","name":"B410b","geoCoord":[265,36],"location":"长廊13.6米层67号登机口吸烟室对面"},{"roomNo":"B411","name":"B411","geoCoord":[295,45],"location":"长廊13.6米层71号登机口吸烟室"},{"roomNo":"B412","name":"B412","geoCoord":[320,68],"location":"长廊13.6米层183号商店沐古堂内（10号安检通道正对）"},{"roomNo":"B413a","name":"B413a","geoCoord":[340,78],"location":"长廊13.6米层浦发银行旁配电间里面"},{"roomNo":"B413b","name":"B413b","geoCoord":[376,56],"location":"长廊13.6米层75号登机口边上"},{"roomNo":"B415a","name":"B415a","geoCoord":[405,95],"location":"长廊13.6米层79号登机口吸烟室"},{"roomNo":"B415b","name":"B415b","geoCoord":[425,62],"location":"长廊13.6米层79号登机口边上"},{"roomNo":"B416a","name":"B416a","geoCoord":[434,98],"location":"长廊13.6米层82号登机口边上厕所"},{"roomNo":"B416b","name":"B416b","geoCoord":[464,68],"location":"长廊13.6米层81号登机口边上"},{"roomNo":"B417a","name":"B417a","geoCoord":[466,104],"location":"长廊13.6米层84号登机口边上"},{"roomNo":"B417b","name":"B417b","geoCoord":[506,74],"location":"长廊13.6米层83号登机口边上"},{"roomNo":"B419a","name":"B419a","geoCoord":[500,110],"location":"长廊13.6米层86号登机口厕所"},{"roomNo":"B419b","name":"B419b","geoCoord":[544,80],"location":"长廊13.6米层85号登机口边上"},{"roomNo":"B420a","name":"B420a","geoCoord":[536,116],"location":"长廊13.6米层88号登机口吸烟室"},{"roomNo":"B420b","name":"B420b","geoCoord":[586,88],"location":"长廊13.6米层87号登机口边上"},{"roomNo":"B422a","name":"B422a","geoCoord":[575,125],"location":"长廊13.6米层90号登机口边上"},{"roomNo":"B422b","name":"B422b","geoCoord":[628,92],"location":"长廊13.6米层89号登机口边上厕所"},{"roomNo":"A401","name":"A401","geoCoord":[117,111],"location":"主楼13.6米层L19柜台"},{"roomNo":"A402","name":"A402","geoCoord":[141,114],"location":"主楼13.6米层L01岛头"},{"roomNo":"A403","name":"A403","geoCoord":[170,118],"location":"主楼13.6米层J19柜台"},{"roomNo":"A404","name":"A404","geoCoord":[196,122],"location":"主楼13.6米层J01柜台"},{"roomNo":"A405","name":"A405","geoCoord":[228,128],"location":"主楼13.6米层H01柜台"},{"roomNo":"A406","name":"A406","geoCoord":[256,132],"location":"主楼13.6米层E岛19柜台旁"},{"roomNo":"A407","name":"A407","geoCoord":[283,136],"location":"主楼13.6米层D岛19柜台旁"},{"roomNo":"A408","name":"A408","geoCoord":[306,140],"location":"主楼13.6米层国际到达过安检上2Ｆ到底上３Ｆ"},{"roomNo":"A409","name":"A409","geoCoord":[329,144],"location":"主楼13.6米层B岛办票里面"},{"roomNo":"A410","name":"A410","geoCoord":[354,149],"location":"主楼13.6米层国际到达过安检上３Ｆ"},{"roomNo":"A411","name":"A411","geoCoord":[158,90],"location":"主楼13.6米层L岛后厕所旁"},{"roomNo":"A412","name":"A412","geoCoord":[390,128],"location":"主楼13.6米层B岛后厕所旁"}],"delMarkPointData":""},"signInRoom":{"addMarkPointData":[],"delMarkPointData":[]},"notSignInRoom":{"addMarkPointData":[],"delMarkPointData":[]}}]}}';
		res = JSON.parse(res);
		if(res.msg="success"){
			//把数据变成echarts接受的option
			for (var i=0 ;i<echart.length; i++) {
				setOptionFactory(echart[i][1], res.data, echart[i][0]);
			}
			lodingListScroll(lodingScrollData);
			lodingScrollData = [];
		}
           
    }

    var lodingScrollData = [];
    function setOptionFactory(echart,data,mapId){
        var roomData = data.roomData;
        var allRommData = [];
        var signInRoomData = [];
        var notSignInRoomData = [];
        var title = "";
        var subTitle = "";
        for(var i=0; i<roomData.length; i++){
            if(roomData[i].mapId == mapId){
                title = roomData[i].mapName;
                subTitle = roomData[i].mapSubName;

                allRommData = roomData[i].allRomm.addMarkPointData;
                signInRoomData = roomData[i].signInRoom.addMarkPointData;
                notSignInRoomData = roomData[i].notSignInRoom.addMarkPointData;

            }
        }

        lodingScrollData = lodingScrollData.concat(signInRoomData,notSignInRoomData);

        var option = {
            /* backgroundColor: '#eee',*/
            title: {
                text: title,
                //subtext: subTitle,
                x: 'right',
                padding:[27, 33, 0, 0],
                textStyle: {
                    fontSize: 24,
                    fontWeight:'normal',
                    color: '#ffffff',
                    fontFamily:'Microsoft Yahei'
                },
                subtextStyle: {
                    fontSize: 18,
                }
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0,0,0,0.5)',
                enterable:true,
                formatter:function(params,ticket,callback){
                    //console.log(params);
                    var tipInfo = "";
                    if(params.data.name){
                        tipInfo += "机房编号："+params.data.roomNo;
                    }
                    if(params.data.userName){
                        tipInfo += "<br/>出入人员："+params.data.userName;
                    }
                    if(params.data.swipeTime){
                        tipInfo += "<br/>刷卡时间："+params.data.swipeTime;
                    }
                    if(params.data.signInTime){
                        tipInfo += "<br/>签入时间："+params.data.signInTime;
                    }
                    if(params.data.location){
                        tipInfo += "<br/>位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置："+params.data.location;
                    }
                    if(tipInfo==""){
                        return option.title.text;
                    }
                    return tipInfo;
                }
            },
            color: ['#9e9e9e', '#fcd21d', 'red'],
            legend: {
                y: 20,
                itemWidth: 22,
                itemHeight: 10,
                textStyle:{
                    color: '#ffffff',
                    fontSize: 10
                },
                data: [
                    {
                        name : '无人员',
                        icon : 'image://map/img/legend_gray.png'
                    },
                    {
                        name : '已签入',
                        icon : 'image://map/img/legend_yellow.png'
                    },
                    {
                        name : '未签入',
                        icon : 'image://map/img/legend_red.png'
                    }
                ]
            },
            toolbox: {
                show: true,
                x: 'right',
                y: 'bottom',
                orient: 'vertical',//布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
                itemSize:18,
                //color: ['#1e90ff','#22bb22','#4b0082','#d2691e'],
                feature: {
                    //dataView: { show: true, readOnly: false },
                    //saveAsImage: { show: true },
                    restore: { //还原
                        show: true,
                        icon : 'image://map/img/icon_refresh.png'
                    },
                    myTool : {
                        show : true,
                        title : '最大化',
                        icon : 'image://map/img/icon_full_screen.png',
                        onclick : function (){
                            var full_screen_flag = parseInt($('#full_screen_flag').val());
                            if(full_screen_flag == 1){//放大
                                var height = this.dom.offsetHeight;//兼容FF、IE等
                                var width = this.dom.offsetWidth;//兼容FF、IE等
                                $(this.dom).width('1490px');
                                $(this.dom).height('959px');
                                $(".item").css("background-image","url('map/img/frame.png')");

                                echart.resize();

                                $(".item").hide();
                                $(this.dom).show();

                                /*for(x in option.series){
                                 option.series[x].markPoint.symbolSize = 20;
                                 }*/
                                option.series[0].mapLocation={x:'center',y:'center'};
                                option.toolbox.feature.myTool.title = '最小化';
                                $('#full_screen_flag').val(0);
                            }
                            if(full_screen_flag == 0){//缩小
                                $(".item").width('738px');
                                $(".item").height('311px');
                                $(".item").css("background-image","url('map/img/frame1.png')");
                                echart.resize();
                                $(".item").show();

                                /*for(x in option.series){
                                 option.series[x].markPoint.symbolSize = 20;
                                 }*/
                                option.series[0].mapLocation={x:38,y:90};//还原初始位置
                                option.toolbox.feature.myTool.title = '最大化';
                                $('#full_screen_flag').val(1);//
                            }
                            echart.setOption(option);
                        }
                    }
                }
            },
            series: [
                {
                    name:'无人员',//0
                    type: 'map',
                    mapType: 'T2',
                    mapLocation:{x:38,y:90},//设置初始位置
                    roam: true,//开启滚轮缩放
                    hoverable:false,//鼠标悬停高亮
                    data: [],
                    markPoint: {
                        symbol: 'image://map/img/label_gray.png',//支持自定义图片
                        symbolSize: 18,
                        itemStyle: {
                            normal: {
                                borderColor:'#8e8e8e',
                                borderWidth:5
                            }
                        },
                        effect: {
                            show: false,//show 是否开启，默认关闭
                            type: 'scale',//type 特效类型，默认为'scale'（放大），可选还有'bounce'（跳动）
                            loop: true,//loop 循环动画，默认开启,
                            period: 15,//period 运动周期，无单位，值越大越慢，默认为15
                            scaleSize : 2,//scaleSize 放大倍数，以markPoint symbolSize为基准，type为scale时有效
                            bounceDistance: 10,//bounceDistance 跳动距离，单位为px，type为bounce时有效
                            color : null,//color 炫光颜色，默认跟随markPoint itemStyle定义颜色,
                            shadowColor : null,//shadowColor 光影颜色，默认跟随color
                            shadowBlur : 0//shadowBlur 光影模糊度，默认为0
                        },
                        data: allRommData
                    }
                },
                {
                    name:'已签入',//1
                    type: 'map',
                    mapType: 'T2',
                    roam: true,
                    hoverable:false,
                    data: [],
                    markPoint: {
                        symbol: 'image://map/img/label_yellow.png',//支持自定义图片
                        symbolSize: 20,
                        itemStyle: {
                            normal: {
                                borderColor:'#ea8e0a',
                                borderWidth:5,
                                label: {
                                    show: true,
                                    position:'top',//bottom top
                                    textStyle: {
                                        color:'#ffffff',
                                        fontSize: 12,
                                        fontStyle:'normal',//样式，可选为：'normal' | 'italic' | 'oblique'
                                        fontWeight:'bold',//粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
                                    },
                                    formatter:function(params){
                                        //console.log(params);
                                        return params.data.roomNo;
                                    }
                                }
                            }
                        },
                        data: signInRoomData
                    }
                },
                {
                    name:'未签入',//2特效
                    type: 'map',
                    mapType: 'T2',
                    roam: true,
                    hoverable:false,
                    data: [],
                    markPoint: {
                        //symbol: 'diamond',//"circle","rectangle","triangle","diamond","emptyCircle","emptyRectangle","emptyTriangle","emptyDiamond"
                        symbolSize: 10,
                        effect: {
                            type: 'scale',// 特效类型，默认为'scale'（放大），可选还有'bounce'（跳动）
                            show: true,
                            //color: 'yellow',
                            shadowBlur : 5

                        },
                        data: notSignInRoomData
                    }
                },
                {
                    name:'未签入',//3
                    type: 'map',
                    mapType: 'T2',
                    roam: true,
                    hoverable:false,
                    data: [],
                    markPoint: {
                        symbol: 'image://map/img/label_red.png',//支持自定义图片
                        symbolSize: 20,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position:'top',//bottom top
                                    textStyle: {
                                        color:'#ffffff',
                                        fontSize: 12,
                                        fontStyle:'normal',//样式，可选为：'normal' | 'italic' | 'oblique'
                                        fontWeight:'bold',//粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
                                    },
                                    formatter:function(params){
                                        //console.log(params);
                                        return params.data.roomNo;
                                    }
                                }
                            }
                        },
                        data: notSignInRoomData
                    }
                }
            ]
        };

        echart.hideLoading();

        // 为echarts对象加载数据
        echart.setOption(option);

        echart.refresh();//刷新图表，图例选择、数据区域缩放，拖拽状态均保持。
    }
</script>
</body>
</html>

</body>
</html>